<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="main_pc">
        <title>火堆工作台</title>       
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user.center.css')}" type="text/css">
        <link rel="stylesheet" href="${resource(dir: 'css_pc', file: 'project.css')}" type="text/css">
		<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
	    <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
	    <style>
	    div .img{
	    	float: left;
	    	width: 220px; 
	    	min-height: 160px;
	    	background-size: cover;
	    	background-repeat: no-repeat;
	    }
	    div .del-btn{
	        float: left;
	        margin-top: 75px;
	    }
	    div .cover{
	    	display:block;
	    	float: left;
	    	margin-left:20px;
	    	margin-bottom:15px;
	    }
	    .form-ctrl .img-box-single input[type=file] {
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    left: 0;
		    top: 0;
		    z-index: 100;
		    opacity: 0;
		}
		
	    .form-ctrl .img-box-m input[type=file] {
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    left: 0;
		    top: 0;
		    z-index: 100;
		    opacity: 0;
		}
		.form-style3 .tips {
		    color: #FB6E50;
		}
	    </style>
    </head>
<body>

	<div class="container-fluid">

		<section class="quick-navi mb20">
			<div class="container">
				<a href="#" class="quick-link"><span>火堆工作台</span><span
					class="caret"></span></a>
				<!--a href="#" class="quick-link">联系我们</a-->
			</div>
		</section>

		<section>
			<div class="container mb50">
				
				<g:render template="navigate"   model="[status: status]"/>
							
				<div class="right-content" id="rightconsole">

					<div class="launch-container">
               
                <div class="content">
                	<h3>新建基金池</h3>
                    <g:form id = "all-form" url="[resource:FundPoolInstance, action:'saveFundPool']" method="post" class="form-style3">
                        <div class="form-item fix-width">
                            <label for="">爱心池名称<span class="tips">*</span></label>
                            <div class="form-ctrl">
                                <input type="text" name="name" />
                            </div>
                        </div>
                        
                        <div class="form-item fix-width">
                            <label for="">类型<span class="tips">*</span></label>
                            <div class="form-ctrl">
                                <div class="select-ctrl">
                                    <select id="types" name="type">
                                        <option value="企业">company</option>
                                        <option value="个人">person</option>
                                        <option value="团体">group</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-item fix-width">
                            <label for="">封面<span class="tips">*</span></label>
                            <div class="form-ctrl">
                                <div class="img-box-single btn o no-border">
                                    +点击上传图片
                                    <input type="file" class="upload-cover" name="img-c" id="img-c">
                                </div>
                            </div>
                        </div>
                         <div class="form-item fix-width">
	                        <label for="">预览<span class="tips"></span></label>
	                        <div class="form-ctrl" id="imgBox" index="1">
		                        <div class="cover">
		                        	<input type="hidden" name="imgcoverPic" id="imgcoverPic">
		                            <div id="imgCover" class="img" style="background-image:url()"></div>
		                        </div>
	                        </div>
                        </div>
                        
                        <div class="form-item fix-width">
                            <label for="">组织/个人全称<span class="tips"></span></label>
                            <div class="form-ctrl">
                                <input type="text" name="fullName" />
                            </div>
                        </div>
                        
                        <div class="form-item fix-width">
                            <label for="">联系人<span class="tips"></span></label>
                            <div class="form-ctrl">
                                <input type="text" name="contacter" />
                            </div>
                        </div>
                        
                        <div class="form-item fix-width">
                            <label for="">联系电话<span class="tips"></span></label>
                            <div class="form-ctrl">
                                <input type="text" name="tel" />
                            </div>
                        </div>
                        
                        <div class="form-item fix-width">
                            <label for="">联系邮箱<span class="tips"></span></label>
                            <div class="form-ctrl">
                                <input type="text" name="email" />
                            </div>
                        </div>
                        
                        <div class="form-item fix-width">
                            <label for="">证件执照<span class="tips"></span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <div class="img-box-m btn o no-border">
                                    +点击上传图片
                                    <input type="file" class="upload-cover" name="img-p" id="img-p">
                                </div>
                            </div>
                        </div>
                        <div class="form-item fix-width">
	                        <label for="">预览<span class="tips"></span></label>
	                        <div class="form-ctrl" id="imgpic" index="1">
		                        <div class="cover">
		                        	<input type="hidden" name="img" id="img1">
		                            <div id="imgshow1" class="img" style="background-image:url()"></div>
		                        </div>
	                        </div>
                        </div>
                        
                        <div class="form-item">
                        <label for="">简介<span class="tips">*</span></label>
                         <div class="form-ctrl">
                                <textarea  name="description" /></textarea>
                         </div>
                        </div>
                        
                        
                        <div class="form-item">
                            <div class="btn-container">
                                <Button type="button" class="btn btn-save-all">保存</Button>
                            </div>
                        </div>
                    </g:form>
                    
                </div>
            </div>                           
            	</div>
                	
                	
			</div>
			<div class="clearboth"></div>
		</section>


	</div>

	<script type="text/javascript">

	var posterStates;
		$(function() {

			$('ul.nav.navbar-nav li').hover(
					function() {
						console.log($(this).index());
						$(this).siblings('.top-active').addClass(
								'position-' + $(this).index());
					},
					function() {
						$(this).siblings('.top-active').removeClass(
								'position-' + $(this).index());
			});

		     $('.img-box-m').on('change', 'input[type=file]' ,function(){
		         //the url is for test ....
		         posterStates = true;
		         var obj = $(this);
		         var file = obj.attr('id');
		         console.log("request:"+file);
		          $.ajaxFileUpload({  
		     			url:'/scfire/project/imgSaveMb',  
		     			secureuri:false,  
		     			dataType:'text',
		     			fileElementId:file,//file标签的id 
		     			success: function (data, status) { 
					           	if(data=='large'){
					           		showWarn('图片过大');
					           		return;
					           	}
					       		if(data=='format'){
					           		showWarn('图片格式不对');
					           		return;
					           	}
				               //把图片替换  
				               if(data=='fail'){
				               		showWarn('上传失败');
				               }else{
				            	   //图片预览
				            	   
				            	   console.log("return:"+data);
				                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
				                   //图片地址赋值给后台
				                   addNewImgPreview(imageurl ,data);
				                   //$("#img").val(data);  
				                   
				                   //$("#imgshow").css('background-image', 'url(' + imageurl + ')');
		             
				               }
				           },  
				           error: function (data, status, e) {  
				           },
				          
		     	});
		     });

		     $('.img-box-single').on('change', 'input[type=file]' ,function(){
		         //the url is for test ....
		         posterStates = true;
		         var obj = $(this);
		         var file = obj.attr('id');
		         console.log("request:"+file);
		          $.ajaxFileUpload({  
		     			url:'/scfire/project/imgSaveMb',  
		     			secureuri:false,  
		     			dataType:'text',
		     			fileElementId:file,//file标签的id 
		     			success: function (data, status) { 
					           	if(data=='large'){
					           		showWarn('图片过大');
					           		return;
					           	}
					       		if(data=='format'){
					           		showWarn('图片格式不对');
					           		return;
					           	}
				               //把图片替换  
				               if(data=='fail'){
				               		showWarn('上传失败');
				               }else{
				            	   //图片预览
				            	   
				            	   console.log("return:"+data);
				                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
				                   //图片地址赋值给后台
				                   $("#imgcoverPic").val(data);  
				                   
				                   $("#imgCover").css('background-image', 'url(' + imageurl + ')');
		             
				               }
				           },  
				           error: function (data, status, e) {  
				           },
				          
		     	});
		     });
			//保存
	 		$('.btn-save-all').click(function(){
	 			var name = $("input[name=name]").val();
		 		var cover = $("input[name=imgcoverPic]").val();
		 		var description = $("textarea[name=description]").val();

		 		if(name== ''){
			 		alert('您没有填写基金池名称');
			 		return;
			 	}
			 	if(cover== ''){
			 		alert('请上传一张封面');
			 		return;
				}
				if(description == ''){
					alert('请填写基金池简介');
					return;
				}
		 		//checkname;
		 		//checkcover;
		 		//checktype;
		 		//checkdescription;
	 	    	//console.log(data);
	 	        $("form.form-style3").submit();
	 	         
	 	    });

			//

		});

		function removepic(index){
	         $('div.cover [indexValue='+index+']').parent().remove();
	    }

		function addNewImgPreview (url, img) {
	        var imgs = $('#imgpic');

	        var index = parseInt(imgs.attr('index'));
	        index++;
	        
	        imgs.find('.cover:last-child .img').attr("indexValue", index).css('background-image', 'url(' + url + ')');

	        imgs.find('.cover:last-child').find('input[type=hidden]').val(img);
	        imgs.find('.cover:last-child').append('<div class="del-btn"><a class="del" onclick="removepic('+index+')">删除</a></div></div>');
	        var html = '<div class="cover"><input type="hidden" id="img' + index + '" name = "img"><div  class="img" style="background-image:url()"></div>'
	        imgs.attr('index', index).append(html);
	    }
		

	</script>

</body>
</html>